<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
  *{
   margin: 0;
   padding: 0;
  
  }
  body{
	  background-image: url(img/5ae0bcc08d97ed2a04eb2bf736f91375.jpg);
	  background-size: cover;
	  border: 2px ridge #DC143C;
  }
	div.header{
		margin: 0px auto;
		height: 300px;
		width: 62.5rem;
		background-image: url(img/185e6b5da74cf41920619bfd8b687305.jpg);
		background-size: auto;
		font-family: "宋体";
	}
   
   div#body{
    margin: 10px auto;
    height: 800px;
    width: 800px;
    background-color: cyan;
    
    
   }
   
   ul{
    text-align: center;
	
    
   }
   li{
    font-family: "宋体";
    font-size: 20px;
    border: 2px ridge;
    display: inline-block;
    width: 100px;
    height: 30px;
    background-color: crimson;
    
   }
   li a{
    text-align: center;
    text-decoration: none;
   }
   li:hover{
    background-color: brown;
   }
   li:active{
    background-color: chartreuse;
   }
   
   
   .pictureline{
    width: 1050px;
    height: 400px;
    
    margin: 50px auto;
   }
   .context{
	   width: 240px;
	   height: 160px;
	   position: relative;
	   overflow: hidden;
	   float: left;
	   margin: 0.625rem;
   }
   .image{
	   width: 100%;
	   height: 180px;
	   transition: 0.7s;
	   border: 2px ridge crimson;
   }
   .hide{
	position: absolute;
	left: 0;
	bottom: -80px;
	width: 100%;
	height: 70px;
	background-color: rgba(0,0,0,0.7);
    color: white;
	
	transition: 0.7s;
   }
   .context:hover .hide{
    bottom: 0px;
   }
  
   .h-context{
	   padding: 10px;
   }
   
   .context:hover .image{
		transform: scale(1.3);
		border: 2px solid blue;
   }
   h1{
	   text-shadow: orangered 5px 5px 10px;
   }
	h2{
		position: relative;
		left: 400px;
		text-shadow: orangered 5px 5px 10px;
	}
  </style>
 </head>
 <body>
  <div class="header">
	 <center> <h1>大国风雨40年，崭新屹立于世间</h1></center>
	  <h2>——————科学技术成就</h2>
  </div>
  <ul>
   <li><a href="https://www.google.cn/">Google</a></li>
   <li><a href="https://hao.qq.com/?unc=o400493_1&s=o400493_1">qq导航</a></li>
   <li><a href="https://www.sogou.com/">搜狗</a></li>
   <li><a href="https://www.baidu.com/index.php?tn=62076830_5_hao_pg">百度</a></li>
  </ul>
  <div class="pictureline"><!--=wrap-->
	<div class="context">
		<a href="#"><img class="image" src="img/2778-imrkkfx3035841.png" /></a>
		<div class="hide"><!--=context-->
			<div class="h-context">
				<h5>中国天眼</h5>
				
			</div>
	   </div>
   </div>
  
   	<div class="context">
   		<a href="#"><img class="image" src="img/2a0e-imrkkfx3036412.png" /></a>
   		<div class="hide"><!--=context-->
   			<div class="h-context">
   				<h5>量子卫星—— “墨子号”</h5>
   				
   			</div>
   	   </div>
    </div>
   
	
		<div class="context">
			<a href="#"><img class="image" src="img/3ef3-imrkkfx3036037.png" /></a>
			<div class="hide"><!--=context-->
				<div class="h-context">
					<h5>核聚变发电机-“人造太阳”</h5>
					
				</div>
		   </div>
	 </div>
	
	 
	 	<div class="context">
	 				<a href="#"><img class="image" src="img/timg-3.jpeg" /></a>
	 				<div class="hide"><!--=context-->
	 					<div class="h-context">
	 						<h5>核聚变发电机</h5>
	 						
	 					</div>
	 			   </div>
	 	</div>
	  	<div class="context">
	  		<a href="#"><img class="image" src="img/5ebe-imrkkfx3035041.png" /></a>
	  		<div class="hide"><!--=context-->
	  			<div class="h-context">
	  				<h5>神威-太湖之光</h5>
	  				
	  			</div>
	  	   </div>
	   </div>
	   
	   	<div class="context">
	   		<a href="#"><img class="image" src="img/8ffd-imrkkfx3034375.png" /></a>
	   		<div class="hide"><!--=context-->
	   			<div class="h-context">
	   				<h5>未来中国国际空间站</h5>
	   				
	   			</div>
	   	   </div>
	    </div>
	    
			<div class="context">
				<a href="#"><img class="image" src="img/u_772329982_549504376&fm_26&gp_0.jpg" /></a>
				<div class="hide"><!--=context-->
					<div class="h-context">
						<h5>C919-国产大飞机</h5>
						
					</div>
			   </div>
		 </div>
		 
		 <div class="context">
		 				<a href="#"><img class="image" src="img/ba716d08d1024357c33a0efa6999f915.jpeg" /></a>
		 				<div class="hide"><!--=context-->
		 					<div class="h-context">
		 						<h5>“北斗”导航系统</h5>
								
		 					</div>
		 			   </div>
		 </div>
		 </div>
 </body>
</html>
